<div class="card mb-4">
    <h6 class="card-header">
        Simple Data
        <span ng-bind="$ctrl.title"></span>

        <button class="btn btn-link text-primary btn-sm float-right py-0" type="button" data-toggle="collapse"
            data-target="#module-attr-table" aria-controls="module-attr-table" aria-expanded="false"
            aria-label="Toggle navigation"><span class="far fa-minus-square text-primary"></span> Show/Hide</button>

        <button type="button" ng-click="$ctrl.addAttr()" class="btn btn-link text-primary btn-sm float-right py-0"><span
                class="fas fa-plus text-primary"></span> Add Attr</button>
        <!-- <a ng-click="$ctrl.generateForm()" class="btn btn-primary btn-sm float-right text-white mr-2">Generate Form</a> -->
    </h6>
    <div id="module-attr-table" class="card-body collapse">
        <table class="table table-sm" id="Table">
            <thead class="thead-light">
                <tr>
                    <th>
                        <span class="fa fa-grip-vertical text-black-50-numeric-down"></span>
                    </th>
                    <th>Title</th>
                    <!--<th >Name</th>-->
                    <th>Type</th>
                    <!--<th >Width</th>-->
                    <th>Unique</th>
                    <th>Required</th>
                    <!--<th >GroupBy</th>-->
                    <th>Select</th>
                    <th>Display</th>
                    <th></th>
                </tr>
            </thead>
            <tbody class="sortable" dnd-list="$ctrl.columns">
                <tr class="sortable-item module-column" ng-repeat="col in $ctrl.columns track by $index"
                    dnd-draggable="col" dnd-effect-allowed="move" dnd-selected="selectedCol = col"
                    dnd-moved="$ctrl.columns.splice($index, 1)" ng-class="{'selected': $ctrl.selectedCol === col}">
                    <td style="cursor:grab;" class="drag-header">
                        <small class="fa fa-grip-vertical text-black-50 align-middle"></small>
                    </td>
                    <td>
                        <input ng-model="col.title" placeholder="Title" ng-change="$ctrl.generateName(col)"
                            class="form-control form-control-sm">
                        <small class="form-text text-muted">Name: <input type="text" class="input-sm"
                                ng-model="col.name" /></small>
                    </td>
                    <td>
                        <select class="form-control form-control-sm" ng-model="col.dataType">
                            <option ng-repeat="item in $ctrl.settings.dataTypes track by $index" ng-value="item.value">
                                {{item.name}}
                            </option>
                        </select>
                    </td>
                    <!--<td>
                                        <input ng-model="col.width" class="form-control form-control-sm" />
                                    </td>-->
                    <td>
                        <input class="" type="checkbox" ng-model="col.isUnique">
                    </td>
                    <td>
                        <input class="" type="checkbox" ng-model="col.isRequired">
                    </td>
                    <!--<td>
                                        <span class="switch">
                                            <input id="isGroupBy_{{$index}}" type="checkbox" class="switch" ng-model="col.isGroupBy">
                                            <label for="isGroupBy_{{$index}}">&nbsp;</label>
                                        </span>
                                    </td>-->
                    <td>
                        <input class="" type="checkbox" ng-model="col.isSelect">
                    </td>
                    <td>
                        <input class="" type="checkbox" ng-model="col.isDisplay">
                    </td>
                    <td>
                        <a class="btn btn-sm btn-light text-danger del-popover" ng-click="$ctrl.removeAttr($index);">
                            <span class="fas fa-trash-alt"></span>
                        </a>
                    </td>
                </tr>
                <tr class="module-column" ng-repeat="col in $ctrl.columns track by $index" ng-if="col.isSelect">
                    <td colspan="8">
                        <div class="col-12">
                            <!-- <div class="col-12">
                                                <h1 ng-bind="col.name"></h1>
                                                <input type="text" id="option_{{$index}}" ng-enter="addOption(col,$index)" placeholder="fill then enter to add options" class="form-control">
                                            </div> -->
                            <div class="form-group row mb-0">
                                <label for="staticEmail" class="col-sm-3 col-form-label" ng-bind="col.title"></label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control form-control-sm" id="option_{{$index}}"
                                        ng-enter="$ctrl.addOption(col,$index)"
                                        placeholder="fill then enter to add options">
                                </div>
                            </div>
                            <div class="row pb-1" ng-repeat="opt in col.options track by $index">
                                <div class="col-11">
                                    <input type="text" class="form-control form-control-sm"
                                        ng-model="col.options[$index]">
                                </div>
                                <div class="col-1">
                                    <a class="btn" ng-click="col.options.splice($index,1)">
                                        <span class="fas fa-trash-alt text-danger"></span>
                                    </a>
                                </div>
                            </div>
                        </div>

                    </td>
                </tr>
            </tbody>
        </table>

    </div>
</div>